<html>
  <head>
    <title>Timeline demo</title>

    <script type="text/javascript" src="../timeline.js"></script>
    <link rel="stylesheet" type="text/css" href="../timeline.css">
    
    <script type="text/javascript">
      function draw() {
        // Create and populate a data table.
        var data = [
          {
          'start': new Date(2012,2,23), 
          'content': '<span onmouseover="console.log(\'onmouseover\', event);" ' +
            'onmouseout="console.log(\'onmouseout\', event);">' +
            'Move your mouse over this item<br>then check the console</span>'
          }
        ];

        // specify options
        var options = {
          'start': new Date(2012, 2, 22),
          'end': new Date(2012, 2, 24),
          'width':  '100%', 
          'height': '300px'
        };

        // Instantiate our timeline object.
        var timeline = new links.Timeline(document.getElementById('mytimeline'));
        
        // Draw our timeline with the created data and options 
        timeline.draw(data, options);
      }
   </script>
  </head>

  <body onload="draw();">
    <div id="mytimeline"></div>
  </body>
</html>
